import 'dart:io';

import 'package:dotted_border/dotted_border.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dynamic_icon/flutter_dynamic_icon.dart';
import 'package:flutter_dynamic_icon_plus/flutter_dynamic_icon_plus.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:geomancy/api/pay.dart';
import 'package:geomancy/api/user.dart';
import 'package:geomancy/mock/heData.dart';
import 'package:geomancy/models/vip_price_list_model.dart';
import 'package:geomancy/providers/user_provider.dart';
import 'package:geomancy/styles/index.dart';
import 'package:geomancy/tools/constant.dart';
import 'package:geomancy/tools/utils.dart';
import 'package:geomancy/widgets/common_btn.dart';
import 'package:geomancy/widgets/common_header.dart';
import 'package:geomancy/widgets/common_text.dart';
import 'package:geomancy/widgets/common_title.dart';
import 'package:geomancy/widgets/modal_util/index.dart';
import 'package:geomancy/widgets/stroke_text.dart';
import 'package:provider/provider.dart';
import 'package:tobias/tobias.dart';

enum IconType { defaultIcon, selfZodiac, sanHeZodiac, liuHeZodiac }

class VipIndexPage extends StatefulWidget {
  const VipIndexPage({super.key});

  @override
  State<VipIndexPage> createState() => _VipIndexPageState();
}

class _VipIndexPageState extends State<VipIndexPage> {
  List vipFunctionList = [
    {
      'txt': '自动备份',
      'url': 'assets/icons/icon_vip_cloud.png',
      'desc': '会员有效期内，我们将为您同步各项使用数据，包括且不限于所有的使用记录。'
    },
    {
      'txt': '无限择吉',
      'url': 'assets/icons/icon_vip_infinity.png',
      'desc': '会员有效期内，你将享有无限次使用特权。'
    },
    {
      'txt': '去除广告',
      'url': 'assets/icons/icon_vip_ad.png',
      'desc': '会员有效期内，你将享有去除广告特权，专属纯净使用体验。'
    },
    {
      'txt': '更改图标',
      'url': 'assets/icons/icon_vip_widget.png',
      'desc': '会员有效期内，你将享有会员专属桌面图标。'
    }
  ];
  int vipFunActiveIndex = 0;
  int priceIndex = 0;
  int payIndex = 0;
  bool agreementSelected = false;
  late bool isIOS;
  List<VipPriceItemModel> priceList = [];
  bool supportsAlternateIcons = false;
  String? iconSelectedPinYin;
  int iconThemeIndex = 0;
  IconType iconType = IconType.defaultIcon;
  late String zodiacPinYinStr;
  List themeList = [
    {
      "color": const Color.fromRGBO(251, 185, 32, 1),
      "txt": "财",
      "py": "cai"
    },
    {
      "color": const Color.fromRGBO(130, 234, 255, 1),
      "txt": "文",
      "py": "wen"
    },
    {
      "color": const Color.fromRGBO(255, 103, 136, 1),
      "txt": "缘",
      "py": "yuan"
    },
    {
      "color": const Color.fromRGBO(172, 216, 85, 1),
      "txt": "康",
      "py": "kang"
    },
  ];

  @override
  void initState() {
    super.initState();
    isIOS = Platform.isIOS;
    ///未登录用户看到的图标用当年生肖展示
    final user = context.read<UserProvider>().getUserInfo;
    if (user?.zodiac != null) {
      zodiacPinYinStr = Utils.getZodiacPinYinBybIndex(int.parse(user!.zodiac!));
    } else {
      final currentDay = DateTime.now().toString().split(' ')[0];
      zodiacPinYinStr = Utils.getZodiacPinYinBybIndex(Utils.getZodiacIndex(currentDay));
    }
    getVipPriceList();
    initDynamicIcon();
  }

  Future initDynamicIcon() async {
    supportsAlternateIcons = await FlutterDynamicIconPlus.supportsAlternateIcons;
  }

  ///获取支付套餐
  Future getVipPriceList() async {
    final list = await PayAPI.getVipPriceList(context);
    setState(() {
      priceList = list;
    });
  }

  ///获取用户信息
  Future getUserInfo() async {
    final userProvider = context.read<UserProvider>();
    final user = context.read<UserProvider>().getUserInfo;
    final result = await UserAPI.getUserInfo(context, user!.id!);
    if (result != null) {
      userProvider.saveUserInfo(result);
    }
  }

  void chooseFnTab(int index) {
    Utils.shake();
    setState(() {
      vipFunActiveIndex = index;
    });
  }

  void chooseIconHandle(IconType type, int index, String py) {
    Utils.shake();
    setState(() {
      iconType = type;
      iconThemeIndex = index;
      iconSelectedPinYin = py;
    });
  }

  changeIconHandle() async {
    if (Utils.getLoginState(context)) {
      if (!supportsAlternateIcons) {
        EasyLoading.showToast('系统不支持更换图标');
        return;
      }
      final user = context.read<UserProvider>().getUserInfo;
      final isVIP = user?.vipTime != null && DateTime.parse(user!.vipTime!).isAfter(DateTime.now());
      if (!isVIP) {
        EasyLoading.showToast('请先开通会员');
        return;
      }
      try {
        if (Platform.isIOS) {
          if (iconType == IconType.defaultIcon) {
            await FlutterDynamicIcon.setAlternateIconName('app_icon_default', showAlert: false);
          } else {
            await FlutterDynamicIcon.setAlternateIconName("app_icon_${themeList[iconThemeIndex]['py']}_$iconSelectedPinYin", showAlert: false);
          }
        } else {
          if (iconType == IconType.defaultIcon) {
            await FlutterDynamicIconPlus.setAlternateIconName(
              iconName: "default",
              blacklistBrands: ['Redmi'],
              blacklistManufactures: ['Xiaomi'],
              blacklistModels: ['Redmi 200A'],
            );
          } else {
            await FlutterDynamicIconPlus.setAlternateIconName(
              iconName: "app_icon_${themeList[iconThemeIndex]['py']}_$iconSelectedPinYin",
              blacklistBrands: ['Redmi'],
              blacklistManufactures: ['Xiaomi'],
              blacklistModels: ['Redmi 200A'],
            );
          }
        }
        showSuccessModal();
      } catch(e) {
        //...
      }
    }
  }

  ///更改图标成功提示弹窗
  showSuccessModal() {
    ModalUtil.showBlurGeneralDialogWidget(
      context: context,
      barrierDismissible: true,
      modalWidget: Center(
        child: Container(
          decoration: BoxDecoration(
              color: ColorStyle.themeLightColor,
              borderRadius: BorderRadius.all(Radius.circular(60.w))
          ),
          child: DottedBorder(
              borderType: BorderType.RRect,
              strokeWidth: 5.w,
              radius: Radius.circular(60.w),
              dashPattern: [12.w, 6.w],
              color: ColorStyle.borderColor,
              child: Container(
                width: 390.w,
                height: 200.w,
                padding: EdgeInsets.symmetric(vertical: 34.w),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Image.asset('assets/icons/icon_smil.png', width: 72.w,),
                    CommonText(txt: '设置成功', fontSize: 36.sp),
                  ],
                ),
              )
          ),
        ),
      )
    );
  }
  ///支付
  Future payHandle() async {
    if (!agreementSelected) {
      EasyLoading.showToast('请阅读并同意《会员服务协议》和《会员自动续费服务规则》');
      return;
    }
    if (Utils.getLoginState(context)) {
      if (isIOS) {//苹果使用appstore的支付
        EasyLoading.showToast('apple支付待接入');
      } else {
        if (payIndex == 0) {//微信支付
          EasyLoading.showToast('微信支付待接入');
        } else if (priceIndex == 1) {//支付宝支付
          aliPayHandle();
        }
      }
    }
  }
  ///支付宝支付
  Future aliPayHandle() async {
    final data = await PayAPI.getAliPayOrder(context, totalAmount: priceList[priceIndex].price!, subject: priceList[priceIndex].name!);
    if (data != null) {
      Tobias tobias = Tobias();
      final result = await tobias.pay(data, evn: AliPayEvn.sandbox);
      final int resultStatus = int.parse(result['resultStatus']);
      switch (resultStatus) {
        //支付成功
        case 9000:
          EasyLoading.showToast('支付成功！');
          getUserInfo();
          break;
        //正在处理中，支付结果未知（有可能已经支付成功），请查询商家订单列表中订单的支付状态。
        case 8000:
        //支付结果未知（有可能已经支付成功），请查询商家订单列表中订单的支付状态。
        case 6004:
          EasyLoading.showToast('等待查询订单状态');
          break;
        case 4000://订单支付失败。
        case 6001://用户中途取消。
        case 6002://网络连接出错。
          EasyLoading.showToast('支付取消');
          break;
        case 5000://重复请求。
          EasyLoading.showToast('请勿重复支付');
          break;
        default:
          EasyLoading.showToast('支付取消');
          break;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final user = context.watch<UserProvider>().getUserInfo;
    final isVIP = user?.vipTime != null && DateTime.parse(user!.vipTime!).isAfter(DateTime.now());
    final List<String> sanHeList = (HeData.sanHe[zodiacPinYinStr] as List<String>);
    final String liuHeStr = HeData.liuHe[zodiacPinYinStr] as String;
    return Scaffold(
      appBar: CommonHeader.appBar(
        context: context,
        backgroundColor: ColorStyle.themeColor,
        showActions: false
      ),
      backgroundColor: ColorStyle.pageDefaultColor,
      body: Column(
        children: [
          Container(
            height: 160.w,
            alignment: Alignment.topCenter,
            child: Container(
              height: 160.w,
              padding: EdgeInsets.symmetric(horizontal: Constant.PAGEPADDING.w),
              decoration: BoxDecoration(
                color: ColorStyle.themeColor,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(60.w),
                  bottomRight: Radius.circular(60.w),
                ),
              ),
              child: Row(
                children: <Widget>[
                  ///头像
                  Container(
                      width: 110.w,
                      height: 110.w,
                      margin: EdgeInsets.only(right: 30.w),
                      decoration: BoxDecoration(
                          color: ColorStyle.themeLightColor,
                          border: Border.all(width: 5.w, color: ColorStyle.borderColor),
                          borderRadius: BorderRadius.all(Radius.circular(55.w))
                      ),
                      child: user?.avatar != null
                          ? ClipRRect(borderRadius: BorderRadius.all(Radius.circular(55.w)), child: ExtendedImage.network(user!.avatar!, fit: BoxFit.contain))
                          : null
                  ),
                  // Expanded(child: CommonText(txt: user?.username ?? '立即登录', weight: FontWeight.bold)),
                  Expanded(child: GestureDetector(
                    onTap: () {
                      Utils.getLoginState(context);
                    },
                    child: Container(
                      color: Colors.transparent,
                      height: 110.w,
                      alignment: Alignment.centerLeft,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          CommonText(txt: user?.username ?? '立即登录', weight: FontWeight.bold),
                          if (isVIP)
                            Row(
                              children: [
                                Container(
                                  width: 56.w,
                                  height: 26.w,
                                  alignment: Alignment.center,
                                  margin: EdgeInsets.only(right: 10.w),
                                  decoration: BoxDecoration(
                                    color: ColorStyle.borderColor,
                                    borderRadius: BorderRadius.all(Radius.circular(13.w)),
                                  ),
                                  child: Text('VIP', style: TextStyle(fontSize: 20.sp, color: const Color.fromRGBO(255, 195, 54, 1)),),
                                ),
                                CommonText(txt: '有效期至${user?.vipTime?.split(' ')[0]??'-'}', fontSize: 20.sp),
                              ],
                            )
                        ],
                      ),
                    ),
                  )),
                  // if (isVIP)
                  //   Container(
                  //     width: 166.w,
                  //     height: 60.w,
                  //     alignment: Alignment.center,
                  //     margin: EdgeInsets.only(right: 10.w),
                  //     decoration: BoxDecoration(
                  //       border: Border.all(width: 3.w, color: ColorStyle.borderColor),
                  //       borderRadius: BorderRadius.all(Radius.circular(30.w)),
                  //     ),
                  //     child: CommonText(txt: '立即续费', fontSize: 26.sp),
                  //   ),
                ],
              ),
            ),
          ),
          Expanded(child: ListView(
            physics: const ClampingScrollPhysics(),
            padding: EdgeInsets.fromLTRB(0, 80.w, 0, 80.w),
            children: [
              const CommonTitleWidget(txt: '尊享特权'),
              SizedBox(height: 20.w),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: Constant.PAGEPADDING.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: vipFunctionList.asMap().keys.map((index) {
                    return GestureDetector(
                      onTap: () {
                        chooseFnTab(index);
                      },
                      child: Container(
                        key: ValueKey(index),
                        width: 140.w,
                        height: 140.w,
                        decoration: BoxDecoration(
                          border: vipFunActiveIndex == index ? Border.all(width: 5.w, color: ColorStyle.borderColor) : null,
                          color: vipFunActiveIndex == index ? ColorStyle.themeColor : ColorStyle.themeLightColor,
                          borderRadius: BorderRadius.all(Radius.circular(30.w)),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset(vipFunctionList[index]['url'], width: 60.w),
                            CommonText(txt: vipFunctionList[index]['txt'], fontSize: 24.sp)
                          ],
                        ),
                      ),
                    );
                  }).toList(),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 40.w, bottom: 45.w, left: Constant.PAGEPADDING.w, right: Constant.PAGEPADDING.w),
                padding: EdgeInsets.fromLTRB(35.w, 30.w, 0.w, 30.w),
                decoration: BoxDecoration(
                  color: ColorStyle.themeLightColor,
                  border: Border.all(width: 5.w, color: ColorStyle.borderColor),
                  borderRadius: BorderRadius.all(Radius.circular(60.w)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CommonText(txt: vipFunctionList[vipFunActiveIndex]['txt'], height: 1.5, weight: FontWeight.bold),
                    SizedBox(height: 12.w),
                    CommonText(txt: vipFunctionList[vipFunActiveIndex]['desc'], height: 1.5),
                    ///更改app图标
                    if (vipFunActiveIndex == vipFunctionList.length - 1)
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: double.infinity,
                            padding: EdgeInsets.only(right: 35.w),
                            child: GestureDetector(
                              onTap: () {
                                chooseIconHandle(IconType.defaultIcon, 0, 'default');
                              },
                              child: Column(
                                children: [
                                  Container(
                                    width: 130.w,
                                    height: 130.w,
                                    margin: EdgeInsets.only(top: 40.w, bottom: 4.w),
                                    padding: EdgeInsets.all(5.w),
                                    decoration: BoxDecoration(
                                        border: Border.all(width: 1.w, color: iconType == IconType.defaultIcon ? ColorStyle.borderColor : Colors.transparent),
                                        borderRadius: BorderRadius.all(Radius.circular(25.w))
                                    ),
                                    child: Container(
                                      clipBehavior: Clip.hardEdge,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(20.w))
                                      ),
                                      child: Image.asset('assets/app_icons/app_icon_default.png', width: 120.w),
                                    ),
                                  ),
                                  CommonText(txt: '默认图标', fontSize: 24.sp),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(height: 40.w),
                          const CommonText(txt: '会员专属APP图标', height: 1.5, weight: FontWeight.bold),
                          SizedBox(height: 12.w),
                          Container(
                            padding: EdgeInsets.only(right: 35.w),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const CommonText(txt: '本命属相', height: 1.5),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: themeList.asMap().keys.map((index) => GestureDetector(
                                    onTap: () {
                                      chooseIconHandle(IconType.selfZodiac, index, zodiacPinYinStr);
                                    },
                                    child: Column(
                                      children: [
                                        Container(
                                          width: 130.w,
                                          height: 130.w,
                                          padding: EdgeInsets.all(5.w),
                                          decoration: BoxDecoration(
                                              border: Border.all(width: 1.w, color: (iconType == IconType.selfZodiac && iconThemeIndex == index) ? ColorStyle.borderColor : Colors.transparent),
                                              borderRadius: BorderRadius.all(Radius.circular(25.w))
                                          ),
                                          child: Container(
                                            clipBehavior: Clip.hardEdge,
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.all(Radius.circular(20.w))
                                            ),
                                            child: Image.asset('assets/app_icons/app_icon_${themeList[index]['py']}_$zodiacPinYinStr.png', width: 120.w),
                                          ),
                                        ),
                                        CommonText(txt: themeList[index]['txt']),
                                      ],
                                    ),
                                  )).toList(),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 20.w),
                            padding: EdgeInsets.only(right: 35.w),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const CommonText(txt: '三合属相', height: 1.5),
                                Column(
                                  children: sanHeList.map((item) => Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: themeList.asMap().keys.map((index) => GestureDetector(
                                      onTap: () {
                                        chooseIconHandle(IconType.sanHeZodiac, index, item);
                                      },
                                      child: Column(
                                        children: [
                                          Container(
                                            width: 130.w,
                                            height: 130.w,
                                            padding: EdgeInsets.all(5.w),
                                            decoration: BoxDecoration(
                                                border: Border.all(width: 1.w, color: (iconType == IconType.sanHeZodiac && iconThemeIndex == index && iconSelectedPinYin == item) ? ColorStyle.borderColor : Colors.transparent),
                                                borderRadius: BorderRadius.all(Radius.circular(25.w))
                                            ),
                                            child: Container(
                                              clipBehavior: Clip.hardEdge,
                                              decoration: BoxDecoration(
                                                  borderRadius: BorderRadius.all(Radius.circular(20.w))
                                              ),
                                              child: Image.asset('assets/app_icons/app_icon_${themeList[index]['py']}_$item.png', width: 120.w),
                                            ),
                                          ),
                                          CommonText(txt: themeList[index]['txt']),
                                        ],
                                      ),
                                    )).toList(),
                                  )).toList(),
                                )
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 20.w, bottom: 60.w),
                            padding: EdgeInsets.only(right: 35.w),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const CommonText(txt: '六合属相', height: 1.5),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: themeList.asMap().keys.map((index) => GestureDetector(
                                    onTap: () {
                                      chooseIconHandle(IconType.liuHeZodiac, index, liuHeStr);
                                    },
                                    child: Column(
                                      children: [
                                        Container(
                                          width: 130.w,
                                          height: 130.w,
                                          padding: EdgeInsets.all(5.w),
                                          decoration: BoxDecoration(
                                              border: Border.all(width: 1.w, color: (iconType == IconType.liuHeZodiac && iconThemeIndex == index) ? ColorStyle.borderColor : Colors.transparent),
                                              borderRadius: BorderRadius.all(Radius.circular(25.w))
                                          ),
                                          child: Container(
                                            clipBehavior: Clip.hardEdge,
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.all(Radius.circular(20.w))
                                            ),
                                            child: Image.asset('assets/app_icons/app_icon_${themeList[index]['py']}_$liuHeStr.png', width: 120.w),
                                          ),
                                        ),
                                        CommonText(txt: themeList[index]['txt']),
                                      ],
                                    ),
                                  )).toList(),
                                )
                              ],
                            ),
                          ),
                          Center(child: CommonBtnWidget(txt: '确定', size: Size(510.w, 80.w), onTap: changeIconHandle))
                        ],
                      )
                  ],
                ),
              ),
              const CommonTitleWidget(txt: '会员套餐'),
              Container(height: 260.w, margin: EdgeInsets.only(top: 20.w), child: ListView(
                padding: EdgeInsets.symmetric(horizontal: Constant.PAGEPADDING.w),
                scrollDirection: Axis.horizontal,
                children: priceList.isNotEmpty ? priceList.asMap().keys.map((index) {
                  return GestureDetector(
                    onTap: () {
                      Utils.shake();
                      setState(() {
                        priceIndex = index;
                      });
                    },
                    child: Container(
                      key: ValueKey(index),
                      width: 216.w,
                      height: 260.w,
                      margin: EdgeInsets.only(right: index < priceList.length - 1 ? 10.w : 0),
                      padding: EdgeInsets.symmetric(vertical: 36.w),
                      decoration: BoxDecoration(
                          color: index == priceIndex ? ColorStyle.themeColor : ColorStyle.themeLightColor,
                          border: Border.all(width: 5.w, color: ColorStyle.borderColor),
                          borderRadius: BorderRadius.all(Radius.circular(50.w))
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          CommonText(txt: priceList[index].name ?? '-', weight: FontWeight.bold),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Container(
                                margin: EdgeInsets.only(bottom: 4.w),
                                child: const CommonText(txt: '￥', weight: FontWeight.bold),
                              ),
                              StrokeText(txt: isIOS ? priceList[index].iosPrice.toString() : priceList[index].price.toString(), fontFamily: 'FontZKKLT', letterSpacing: -1, fontSize: 64.sp)
                            ],
                          ),
                          CommonText(txt: (isIOS ? priceList[index].descPriceIos : priceList[index].descPriceAndroid)??'-', fontSize: ((isIOS?priceList[index].descPriceIos:priceList[index].descPriceAndroid)?.length??0) > 4 ? 20.sp : 24.sp),
                        ],
                      ),
                    ),
                  );
                }).toList() : [],
              )),
              Container(
                margin: EdgeInsets.only(left: 40.w, top: 20.w),
                child: CommonText(txt: priceList.isNotEmpty ? (isIOS ? priceList[priceIndex].descIos : priceList[priceIndex].descAndroid)??'' : '', fontSize: 24.sp),
              ),
              if (!isIOS)
                Column(
                  children: [
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          payIndex = 0;
                        });
                      },
                      child: Container(
                        color: Colors.transparent,
                        margin: EdgeInsets.only(top: 40.w),
                        padding: EdgeInsets.symmetric(horizontal: Constant.PAGEPADDING.w),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Image.asset('assets/icons/icon_wechat.png', height: 36.w),
                            SizedBox(width: 14.sp),
                            const Expanded(child: CommonText(txt: '微信支付', weight: FontWeight.bold)),
                            Image.asset(payIndex == 0 ? 'assets/icons/icon_pay_confirm_selected.png' : 'assets/icons/icon_pay_confirm.png', height: 40.w),
                          ],
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          payIndex = 1;
                        });
                      },
                      child: Container(
                        margin: EdgeInsets.only(top: 32.w),
                        padding: EdgeInsets.symmetric(horizontal: Constant.PAGEPADDING.w),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Image.asset('assets/icons/icon_alipay.png', height: 36.w),
                            SizedBox(width: 14.sp),
                            const Expanded(child: CommonText(txt: '支付宝支付', weight: FontWeight.bold)),
                            Image.asset(payIndex == 1 ? 'assets/icons/icon_pay_confirm_selected.png' : 'assets/icons/icon_pay_confirm.png', height: 40.w),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              Container(
                margin: EdgeInsets.only(top: 90.w, bottom: 20.w),
                alignment: Alignment.center,
                child: CommonBtnWidget(
                    txt: '确认协议并支付￥${priceList.isNotEmpty ? (isIOS ? priceList[priceIndex].iosPrice : priceList[priceIndex].price) : 0}',
                    size: Size(590.w, 80.w),
                    fontSize: 30.sp,
                    onTap: payHandle
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    agreementSelected = !agreementSelected;
                  });
                },
                child: Container(
                  color: Colors.transparent,
                  height: 40.w,
                  padding: EdgeInsets.symmetric(horizontal: 80.w),
                  child: Row(
                    children: [
                      Container(
                        margin: EdgeInsets.only(bottom: 2.w),
                        child: Image.asset(agreementSelected ? 'assets/icons/icon_pay_confirm_selected.png' : 'assets/icons/icon_pay_confirm.png', height: 24.w),
                      ),
                      SizedBox(width: 20.w),
                      Expanded(child: CommonText(txt: '开通前请阅读《会员服务协议》《会员自动续费服务规则》', fontSize: 20.sp))
                    ],
                  ),
                ),
              )
            ],
          ))
        ],
      ),
    );
  }
}
